<template>
  <div class="details">
    <div class="card border-light p-4" style="min-height: 100vh;">
      <el-skeleton v-if="!paper" :rows="2" animated :throttle="500" />
      <div v-if="paper" class="card-body">
        <h3 class="card-title fw-bold">{{ paper?.titleName }}</h3>
        <div class="paper-time fs-6">{{ new Date(paper.createdTime!).toLocaleString() }}</div>
        <hr />
        <p v-html="paper?.content" class="card-text">
        </p>
      </div>
    </div>
  </div>
</template>

<script async setup lang='ts'>
const paper = ref<Paper>()
const route = useRoute()
const initPaper = async () => {
  const { data } = await useApi.papers.getById(route.query.id as string)
  paper.value = data.value!.data
}
initPaper()
</script>

<style lang="scss" scoped>
.details {}
</style>
